<template>
  <div v-if="show" class="stats-dialog">
    <div class="dialog-content">
      <h3>游戏统计</h3>
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-label">总局数</div>
          <div class="stat-value">{{ stats.totalGames }}</div>
        </div>
        <div class="stat-item">
          <div class="stat-label">胜场</div>
          <div class="stat-value">{{ stats.wins }}</div>
        </div>
        <div class="stat-item">
          <div class="stat-label">负场</div>
          <div class="stat-value">{{ stats.losses }}</div>
        </div>
        <div class="stat-item">
          <div class="stat-label">平局</div>
          <div class="stat-value">{{ stats.draws }}</div>
        </div>
        <div class="stat-item">
          <div class="stat-label">平均步数</div>
          <div class="stat-value">{{ stats.averageMovesPerGame.toFixed(1) }}</div>
        </div>
        <div class="stat-item">
          <div class="stat-label">总游戏时间</div>
          <div class="stat-value">{{ formatTime(stats.totalPlayTime) }}</div>
        </div>
        <div class="stat-item">
          <div class="stat-label">等级分</div>
          <div class="stat-value">{{ stats.rating }}</div>
        </div>
      </div>

      <div class="chart-container">
        <canvas ref="winRateChart"></canvas>
      </div>

      <div class="dialog-buttons">
        <button @click="handleReset">重置统计</button>
        <button @click="$emit('close')">关闭</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useChessStats } from '../composables/useChessStats'
import Chart from 'chart.js/auto'

const props = defineProps<{
  show: boolean
}>()

const emit = defineEmits<{
  (e: 'close'): void
}>()

const { stats, loadStats, resetStats } = useChessStats()
const winRateChart = ref<HTMLCanvasElement | null>(null)
let chart: Chart<'doughnut', number[], string> | null = null

const formatTime = (seconds: number) => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  return `${hours}小时${minutes}分钟`
}

const createChart = () => {
  if (!winRateChart.value || !stats.value.totalGames) return

  const ctx = winRateChart.value.getContext('2d')
  if (!ctx) return

  const winRate = (stats.value.wins / stats.value.totalGames) * 100
  const lossRate = (stats.value.losses / stats.value.totalGames) * 100
  const drawRate = (stats.value.draws / stats.value.totalGames) * 100

  chart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ['胜率', '负率', '和率'],
      datasets: [{
        data: [winRate, lossRate, drawRate],
        backgroundColor: ['#4CAF50', '#f44336', '#2196F3']
      }]
    },
    options: {
      responsive: true,
      plugins: {
        legend: {
          position: 'bottom'
        }
      }
    }
  }) as Chart<'doughnut', number[], string>
}

const handleReset = () => {
  if (confirm('确定要重置所有统计数据吗？')) {
    resetStats()
    if (chart) {
      chart.destroy()
    }
    createChart()
  }
}

onMounted(() => {
  loadStats()
  createChart()
})

watch(() => props.show, (newVal) => {
  if (newVal) {
    loadStats()
    if (chart) {
      chart.destroy()
    }
    createChart()
  }
})
</script>

<style scoped>
.stats-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  min-width: 500px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 20px 0;
}

.stat-item {
  text-align: center;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 4px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-top: 5px;
}

.chart-container {
  height: 300px;
  margin: 20px 0;
}

.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

button:first-child {
  background-color: #f44336;
}

button:first-child:hover {
  background-color: #d32f2f;
}
</style> 